<!--最基础的 select 版本的选择字段-->
<template>
  <div>
    <a-upload
      :before-upload="beforeUpload"
      :custom-request="customRequest"
      list-type="picture"
      class="upload-list-inline"
      @change="handleChange"
    >
      <a-icon v-if="loading" type="loading" />
      <a-button :disabled="loading">
        <div class="ant-upload-text">本地上传</div>
      </a-button>
    </a-upload>
    <div
      v-if="
        fileList.length === 0 &&
        JSON.stringify(value) !== 'null' &&
        JSON.stringify(value) !== '{}' &&
        imgShow
      "
      class="uploaded-file"
    >
      <img :src="value.url" class="img" />
      <span class="name">{{ value.filename }}</span>
      <span
        class="ant-upload-list-item-card-actions picture"
        @click="deleteFunc"
        ><a title="Remove file">
          <i
            aria-label="icon: delete"
            tabindex="-1"
            class="anticon anticon-delete"
            title="Remove file"
            ><svg
              viewBox="64 64 896 896"
              data-icon="delete"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              focusable="false"
              class=""
            >
              <path
                d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
              ></path></svg></i></a
      ></span>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { uploadPhoto, deletePhoto } from '@/api/dashboard'
import { baseURL } from '@/api/axios-config'

@Component
export default class SimpleUpload extends Vue {
  @Prop({ default: {} }) value!: any
  public loading: boolean = false
  public option: any = {}
  public fileList: any = []
  public imgShow: boolean = true

  // 上传预处理
  public beforeUpload(file: any) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJpgOrPng) {
      this.$message.error('请上传JPG/PNG格式的文件!')
      return
    }
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
      this.$message.error('图片的大小不能超过2MB!')
      return
    }
    this.loading = true
    // return isJpgOrPng && isLt2M
    const formData = new FormData()
    formData.append('picture', file)
    uploadPhoto({
      data: formData,
    })
      .then((response: any) => {
        this.loading = false
        if (response.data.code === 100) {
          this.$message.success('图片上传成功！')
          this.fileList = [file]
          response.data.result.url = baseURL + response.data.result.url
          this.$emit('change', response.data.result)
          // this.$emit('change', 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*07tdTIOmvlYAAAAAAAAAAABkARQnAQ')
        } else {
          this.$message.error(response.data.message)
        }
      })
      .catch(() => {
        this.loading = false
      })
  }

  public handleChange(data: any) {
    if (data.fileList.length > 1) {
      // 限制只上传一个文件，再次上传时则替换(覆盖)以前的文件
      data.fileList.splice(0, 1)
    }
    if (data.fileList.length === 0) {
      this.$emit('change', {})
    }
  }

  public async deleteFunc() {
    const picId = this.value.url?.split('/').pop()
    const response = await deletePhoto({ id: picId })
    if (response.data.code !== 100) {
      // 删除失败
      this.imgShow = true
      this.$message.error(response.data.message)
    } else {
      this.imgShow = false
      this.$emit('change', {})
    }
  }

  // 上传图片
  public customRequest(options: any) {
    const { file } = options
    this.option.img = window.URL.createObjectURL(file)
    this.loading = false
  }
}
</script>

<style lang="less" scoped>
.uploaded-file {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  height: 66px;
  margin-top: 8px;
  padding: 8px;
  position: relative;

  .img {
    display: block;
    height: 48px;
    width: 48px;
  }

  .name {
    box-sizing: border-box;
    display: inline-block;
    line-height: 28px;
    margin: 0 0 0 8px;
    max-width: calc(100% - 25px);
    overflow: hidden;
    padding-left: 48px;
    padding-right: 8px;
    position: absolute;
    text-overflow: ellipsis;
    top: 8px;
    transition: all 0.3s;
    white-space: nowrap;
  }

  .icon {
    font-size: 14px;
    position: absolute;
    right: 6px;
  }
}
</style>
